import React, {useState, useEffect} from 'react';
import {
  List,
  Button,
  InputItem,
  Toast,
  ActivityIndicator,
  Flex,
} from '@ant-design/react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {StyleSheet} from 'react-native';
import {formatDate} from '@/helpers/dateutil';
import {Table, Row, Rows} from 'react-native-table-component';
import MaterialReturnStore from './materialReturnStore';
import {WhseManagementHomeRoute, MaterialReturnRoute} from './routeDef';

const styles = StyleSheet.create({
  container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
  head: {height: 40, backgroundColor: '#f1f8ff'},
  text: {margin: 6},
  tableBorder: {borderWidth: 2, borderColor: '#c8e1ff'},
});

function ReturnResultPage({navigation}) {
  const returnStore = MaterialReturnStore.useStore();
  const [returnInfo, setReturnInfo] = useState({
    amSendSubListDTO: [],
  });
  useEffect(() => {
    navigation.setOptions({
      headerLeft: null,
    });
  }, []);
  useEffect(() => {
    async function fetchReturnResult() {
      const soiRes = await returnStore.getReturnResults();
      if (!soiRes.errorCode) {
        setReturnInfo(soiRes.data);
      } else {
        Toast.fail(soiRes.errorMsg);
      }
    }
    fetchReturnResult();
  }, [returnStore]);
  const tableHead = ['件号', '序号', '系统批次号', '退料数量'];
  const tableData = returnInfo.amSendSubListDTO.map((amss) => [
    amss.sorPn,
    amss.sorSn,
    amss.sorSysBatchNo,
    amss.sorSendCount,
  ]);
  const tableRowFlex = [4, 2, 3, 2];
  return (
    <>
      <ActivityIndicator
        text="退料信息获取中..."
        size="large"
        animating={returnStore.getReturnResults.loading}
      />
      <ScrollView>
        <List>
          <InputItem labelNumber={5} value={returnInfo.sooOrderNum}>
            发料单号:
          </InputItem>
          <InputItem labelNumber={5} value={returnInfo.sooReceiveName}>
            退料人:
          </InputItem>
          <InputItem
            labelNumber={5}
            value={formatDate(
              returnInfo.sooReceiveDate,
              'YYYY-MM-DD HH:mm:ss',
            )}>
            退料时间:
          </InputItem>
          <List.Item>
            <Table borderStyle={styles.tableBorder}>
              <Row
                data={tableHead}
                style={styles.head}
                textStyle={styles.text}
                flexArr={tableRowFlex}
              />
              <Rows
                data={tableData}
                flexArr={tableRowFlex}
                textStyle={styles.text}
              />
            </Table>
          </List.Item>
        </List>
      </ScrollView>
      <Flex>
        <Flex.Item>
          <Button
            type="ghost"
            onPress={() => {
              navigation.navigate(MaterialReturnRoute);
            }}>
            继续退料
          </Button>
        </Flex.Item>
        <Flex.Item>
          <Button
            type="primary"
            onPress={() => {
              navigation.navigate(WhseManagementHomeRoute);
            }}>
            返回库房首页
          </Button>
        </Flex.Item>
      </Flex>
    </>
  );
}

ReturnResultPage.routeName = 'ReturnResultPage';
export default ReturnResultPage;
